<template>
  <div class="song_list" v-show="showFlag" @click.self="colse_list()">
    <div class="main">
      <div class="top">
        <div class="left" @click.stop="playRule()">
          <i>
            <img :src="play_rule_data[play_rule_flag].src" alt />
          </i>
          <span class="type">{{play_rule_data[play_rule_flag].info}}</span>
          <span class="num" v-if="songs_detail_flag">({{songs_detail_data.songs.length}})</span>
        </div>
        <div class="right">
          <i class="keep"></i>
          <span class="info">收藏全部</span>
          <span class="seg"></span>
          <i class="del" @click.self="delAll()"></i>
        </div>
      </div>
      <div class="list" ref="list">
        <ul v-if="song_detail_flag&&songs_detail_flag">
          <li
            v-for="(item,index) in songs_detail_data.songs"
            :key="index"
            :class="{active:item.id == song_detail_data.songs[0].id}"
            ref="item_li"
          >
            <div class="left" @click.stop="changeSong(item.id,index)">
              <i class="sound"></i>
              <div>
                <span class="title">{{item.name}}</span>
                <span>-</span>
                <span class="author">
                  <span v-for="(item2,index2) in item.ar" :key="index2">
                    {{item2.name}}
                    <span v-show="index2 < item.ar.length-1">/</span>
                  </span>
                </span>
              </div>
            </div>
            <div class="right">
              <button class="source" @click.stop="source(index)">播放来源</button>
              <i class="colse" @click.self="colse(item.id,index)"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: ["showFlag"],
  data() {
    return {
      isSongsFlag: false,
      music: document.getElementById("audio")
    };
  },
  computed: {
    ...mapState("song_detail", [
      "songs_detail_data",
      "song_detail_data",
      "song_detail_flag",
      "songs_detail_flag"
    ]),
    ...mapState("play_rule", ["play_rule_data", "play_rule_flag"])
  },
  created() {
    this.show_list();
  },
  methods: {
    scrollList() {
      let inIndex = 0;
      this.songs_detail_data.songs.forEach((element, index) => {
        if (element.id == this.song_detail_data.songs[0].id) {
          inIndex = index;
        }
      });
      this.$refs.list.scrollTop =
        this.$refs.item_li[inIndex].offsetTop -
        this.$refs.item_li[inIndex].offsetHeight;
    },
    playRule() {
      let num = this.play_rule_flag;
      switch (num) {
        case 0:
          num++;
          this.$store.commit("play_rule/setIsLoop", true);
          break;
        case 1:
          num++;
          this.$store.commit("play_rule/setIsLoop", false);
          break;
        case 2:
          num = 0;
          this.$store.commit("play_rule/setIsLoop", false);
          break;
        default:
          num = 0;
          this.$store.commit("play_rule/setIsLoop", false);
          break;
      }
      this.$store.commit("play_rule/setPlayRuleFlag", num);
    },
    delAll() {
      localStorage.song_list_id = null;
      localStorage.removeItem("song_list_id");
      this.$store.commit("song_detail/setSongsDetailData", {});
      this.$store.commit("song_detail/setSongDetailData", {});
      this.music.pause();
      this.$store.commit("song_status/setPlayPause", false);
      this.$emit("childEvent", { showFlag: "false" });
      if (this.$route.name == "SongDetail") {
        this.$router.go(-1);
      }
    },
    changeSong(id, index) {
      this.$store
        .dispatch("song_check/getSongCheckData", {
          id: id
        })
        .then(value => {
          if (value) {
            this.$store
              .dispatch("song_detail/getSongDetailData", {
                ids: id
              })
              .then(data => {
                this.$store
                  .dispatch("song_url/getSongUrlData", {
                    id: id,
                    br: "999000"
                  })
                  .then(data => {
                    localStorage.songIsPlayId = id;
                    if (!this.music.src) {
                      this.music.src = data.data[0].url;
                    } else {
                      if (this.music.src == data.data[0].url) {
                      } else {
                        this.music.src = data.data[0].url;
                      }
                    }
                    let playPromise = this.music.play();
                    if (playPromise !== undefined) {
                      playPromise
                        .then(_ => {
                          this.music.play();
                          this.$store.commit("song_status/setPlayPause", true);
                        })
                        .catch(error => {});
                    }
                    this.$refs.list.scrollTop =
                      this.$refs.item_li[index].offsetTop -
                      this.$refs.item_li[index].offsetHeight;
                  });
              });
          }
        });
    },
    source(index) {
      let list = JSON.parse(localStorage.song_list_id);
      if (this.$route.name == list[index].name) {
        this.$router.go(0);
      } else {
        this.$router.push({ name: list[index].name });
      }
      this.$emit("childEvent", { showFlag: "false" });
    },
    colse(id, index) {
      if (id == this.song_detail_data.songs[0].id) {
        this.playFlag(index);
      } else {
        let list = JSON.parse(localStorage.song_list_id);
        list.splice(index, 1);
        localStorage.song_list_id = JSON.stringify(list);
        this.songs_detail_data.songs.splice(index, 1);
      }
    },
    playPause() {
      // 改变暂停/播放icon
      if (this.music.paused) {
        let playPromise = this.music.play();
        if (playPromise !== undefined) {
          playPromise
            .then(_ => {
              this.music.play();
              this.$store.commit("song_status/setPlayPause", true);
            })
            .catch(error => {});
        }
      } else {
        this.music.pause();
        this.$store.commit("song_status/setPlayPause", false);
      }
    },
    playFlag(index) {
      if (index < this.songs_detail_data.songs.length - 1) {
        let list = JSON.parse(localStorage.song_list_id);
        list.splice(index, 1);
        localStorage.song_list_id = JSON.stringify(list);
        this.songs_detail_data.songs.splice(index, 1);
        this.changeSong(this.songs_detail_data.songs[index].id);
      } else if (index >= this.songs_detail_data.songs.length - 1) {
        if (this.songs_detail_data.songs.length - 1 == 0) {
          let list = JSON.parse(localStorage.song_list_id);
          list.splice(index, 1);
          localStorage.song_list_id = JSON.stringify(list);
          this.songs_detail_data.songs.splice(index, 1);
          localStorage.song_list_id = null;
          localStorage.removeItem("song_list_id");
          this.$store.commit("song_detail/setSongsDetailData", {});
          this.$store.commit("song_detail/setSongDetailData", {});
          this.music.pause();
          this.$store.commit("song_status/setPlayPause", false);
          this.$emit("childEvent", { showFlag: "false" });
          if (this.$route.name == "SongDetail") {
            this.$router.go(-1);
          }
        } else {
          let list = JSON.parse(localStorage.song_list_id);
          list.splice(index, 1);
          localStorage.song_list_id = JSON.stringify(list);
          this.songs_detail_data.songs.splice(index, 1);
          this.changeSong(this.songs_detail_data.songs[0].id);
        }
      }
    },
    show_list() {
      if (localStorage.song_list_id) {
        let list = JSON.parse(localStorage.song_list_id);
        if (list.length > 0) {
          let c_list = [];
          for (let key in list) {
            if (list.hasOwnProperty(key)) {
              let element = list[key];
              c_list.push(element.id);
            }
          }
          this.$store.dispatch("song_detail/getSongsDetailData", {
            ids: c_list.join(",")
          });
        } else {
          this.$emit("childEvent", { showFlag: "false" });
        }
      } else {
        this.$emit("childEvent", { showFlag: "false" });
      }
    },
    colse_list() {
      this.$emit("childEvent", { showFlag: "false" });
    }
  }
};
</script>
<style lang="scss" scoped>
.song_list {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.5);
  z-index: 1000;
  .main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top-right-radius: 0.4rem;
    border-top-left-radius: 0.4rem;
    z-index: 1001;
    .top {
      padding: 0 0.2rem;
      line-height: 1rem;
      overflow: hidden;
      border-bottom: 0.02rem solid #eee;
      .left {
        float: left;
        i {
          width: 0.4rem;
          height: 0.4rem;
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.1rem;
          margin-top: -0.1rem;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          font-size: 0.34rem;
          color: #555;
        }
      }
      .right {
        float: right;
        i.keep {
          background: url(../images/b04.png) no-repeat;
          background-size: 100% 100%;
          width: 0.8rem;
          height: 0.8rem;
          display: inline-block;
          vertical-align: middle;
          margin-top: -0.05rem;
          margin-right: -0.2rem;
        }
        span.info {
          display: inline-block;
          font-size: 0.3rem;
          color: #555;
          vertical-align: middle;
        }
        span.seg {
          display: inline-block;
          width: 0.02rem;
          height: 0.5rem;
          background-color: #ccc;
          margin: 0 0.2rem;
          vertical-align: middle;
        }
        i.del {
          background: url(../images/e.png) no-repeat;
          background-size: 100% 100%;
          width: 0.36rem;
          height: 0.36rem;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .list {
      overflow-y: auto;
      height: 6rem;
      ul {
        padding: 0 0.2rem;
        .active {
          color: rgba($color: #ff2d0f, $alpha: 1) !important;
          .left {
            span {
              color: rgba($color: #ff2d0f, $alpha: 1) !important;
            }
            i.sound {
              display: inline-block;
            }
          }
          .right {
            button.source {
              display: inline-block;
            }
          }
        }
        li {
          overflow: hidden;
          line-height: 1rem;
          .left {
            float: left;
            width: 4.8rem;
            text-align: left;

            display: flex;
            align-items: center;
            div {
              flex: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              span.title {
                font-size: 0.3rem;
                color: #333;
                display: inline-block;
                vertical-align: middle;
              }
              span.author {
                font-size: 0.24rem;
                color: #888;
                display: inline-block;
                vertical-align: middle;
              }
            }
            i.sound {
              background: url(../images/axo.png) no-repeat;
              background-size: 100% 100%;
              width: 0.4rem;
              height: 0.4rem;
              display: inline-block;
              vertical-align: middle;
              margin-top: -0.06rem;
              margin-right: 0.1rem;
              display: none;
            }
          }
          .right {
            float: right;
            button.source {
              background-color: #fff;
              border-radius: 2rem;
              font-size: 0.24rem;
              color: #555;
              padding: 0.02rem 0.2rem;
              border: 0.02rem solid #ccc;
              vertical-align: middle;
              display: none;
            }
            i.colse {
              margin-left: 0.2rem;
              background: url(../images/a_c.png) no-repeat;
              background-size: 100% 100%;
              width: 0.4rem;
              height: 0.4rem;
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>